<script setup lang="ts">
import { ref } from 'vue';
import { usePullDownRefresh, stopPullDownRefresh, navigateTo, useReachBottom } from '@tarojs/taro';
import { getMedicationOrder } from '@/service/api/nurse_goods';

definePageConfig({
  navigationBarTitleText: '药品订单',
  enablePullDownRefresh: true,
});

const loading = ref(false);
const orderList = ref<any[]>([]);
let pageNo = 1;
const pageSize = 10;
const hasMore = ref(true);

async function getOrders() {
  if (!hasMore.value) {
    return;
  }
  loading.value = true;
  try {
      const {success, error} = await getMedicationOrder({
        pageNo: pageNo,
        pageSize: pageSize
      });
    console.log('res ----', error, success);
    if (success) {
      orderList.value = [...orderList.value, ...success.records];
      pageNo++;
      if (success.records.length < pageSize) {
        hasMore.value = false;
      }
    }
  }
  catch (error) {
    console.error('Failed to fetch orders', error);
  }
  finally {
    loading.value = false;
  }
}

usePullDownRefresh(() => {
  orderList.value = [];
  hasMore.value = true;
  pageNo = 1;
  getOrders().then(() => {
    stopPullDownRefresh();
  });
});

// 滚动到底部自动加载更多
useReachBottom(() => {
  if (hasMore.value && !loading.value) {
    getOrders();
  }
});

getOrders();

const getStatusText = (status: string) => {
  if (status === '1') {
    return '未支付';
  }
  if (status === '2') {
    return '已支付';
  }
  return '未知状态';
};

const goToDetail = (item: any) => {
  navigateTo({
    url: `/package-other/orders/detail?id=${item.id}&code=${item.code}&outTradeNo=${item.outTradeNo}`,
  });
};
</script>

<template>
  <basic-layout>
    <view class="order-list-page">
      <nut-empty v-if="!loading && orderList.length === 0" description="暂无订单"></nut-empty>
      <view v-else class="order-list">
        <view v-for="order in orderList" :key="order.id" class="order-card" @click="goToDetail(order)">
          <view class="card-header">
            <h3 class="order-text">{{ order.orderText }}</h3>
            <span class="order-status">{{ getStatusText(order.status) }}</span>
          </view>
          <view class="card-body">
            <p class="order-time">下单时间: {{ order.createTime }}</p>
          </view>
          <view class="card-footer">
            <p class="order-price">总价: ¥{{ order.totalPrice }}</p>
          </view>
        </view>
      </view>
      
      <!-- 底部加载状态提示 -->
      <view class="load-more-section" v-if="orderList.length > 0">
        <view v-if="loading" class="loading-text">加载中...</view>
        <view v-else-if="!hasMore" class="no-more-text">没有更多数据了</view>
      </view>
      
      <nut-toast :msg=" '加载中...'" v-model:visible="loading" type="loading" cover></nut-toast>
    </view>
  </basic-layout>
</template>

<style lang="scss">
.order-list-page {
  padding: 10px;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.order-text {
  font-size: 16px;
  font-weight: bold;
}

.order-status {
  font-size: 14px;
  color: #ff6a00;
}

.card-body {
  margin-bottom: 10px;
}

.order-time {
  font-size: 12px;
  color: #999;
}
.card-footer {
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
}
.order-price {
    font-size: 14px;
    font-weight: bold;
}

.load-more-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin-top: 20px;
}

.loading-text {
    color: #666;
    font-size: 14px;
    text-align: center;
}

.no-more-text {
    color: #999;
    font-size: 14px;
    text-align: center;
}
</style>